<%
/**
 * Input 组件
 * @param {String} type - input类型，默认为 'text'
 * @param {String} name - input的name属性
 * @param {String} placeholder - placeholder文本
 * @param {String} value - input的值，可选
 * @param {String} prefix - 前缀内容，显示在输入框左侧，可选
 * @param {String} suffix - 后缀内容，显示在输入框右侧，可选
 * @param {Boolean} required - 是否必填，默认false
 * @param {Boolean} disabled - 是否禁用，默认false
 * @param {Boolean} readonly - 是否只读，默认false
 * @param {String} className - 额外的CSS类，可选
 * @param {String} minWidth - 最小宽度类，可选
 * @param {String} id - input的id属性，可选
 */

const inputId = typeof id !== 'undefined' ? id : 'input_' + Math.random().toString(36).substr(2, 9);
const inputType = typeof type !== 'undefined' ? type : 'text';
const inputName = typeof name !== 'undefined' ? name : '';
const inputPlaceholder = typeof placeholder !== 'undefined' ? placeholder : '';
const inputValue = typeof value !== 'undefined' ? value : '';
const inputPrefix = typeof prefix !== 'undefined' ? prefix : '';
const inputSuffix = typeof suffix !== 'undefined' ? suffix : '';
const isRequired = typeof required !== 'undefined' ? required : false;
const isDisabled = typeof disabled !== 'undefined' ? disabled : false;
const isReadonly = typeof readonly !== 'undefined' ? readonly : false;
const extraClass = typeof className !== 'undefined' ? className : '';
const inputMinWidth = typeof minWidth !== 'undefined' ? minWidth : '';

// 禁用状态样式
const disabledClass = isDisabled ? 'bg-gray-100 text-gray-500 cursor-not-allowed' : '';
const readonlyClass = isReadonly ? 'text-gray-500 cursor-not-allowed' : '';

// 判断是否有前缀或后缀
const hasPrefix = inputPrefix !== '';
const hasSuffix = inputSuffix !== '';
const hasAddon = hasPrefix || hasSuffix;

// 容器样式类
const containerClass = hasAddon ? 'flex items-stretch w-full' : '';

// 输入框样式调整
const inputClass = hasAddon
        ? `flex-1 border border-gray-200 hover:border-blue-400 focus:border-blue-600 focus:outline-none focus:ring-0 focus:ring-blue-600 transition-colors duration-200 px-4 py-3 ${hasPrefix && hasSuffix ? 'rounded-none' : hasPrefix ? 'rounded-r-lg rounded-l-none' : 'rounded-l-lg rounded-r-none'}`
        : `w-full ${inputMinWidth} px-4 py-3 border border-gray-200 rounded-lg hover:border-blue-400 focus:border-blue-600 focus:outline-none focus:ring-0 focus:ring-blue-600 transition-colors duration-200`;

// 前缀/后缀样式
const addonClass = 'flex items-center px-3 py-3 bg-gray-100 text-gray-600 text-sm border border-gray-200 min-w-0 whitespace-nowrap';
const prefixClass = `${addonClass} rounded-l-lg border-r-0`;
const suffixClass = `${addonClass} rounded-r-lg border-l-0`;
%>

<% if (hasAddon) { %>
    <!-- 带前缀/后缀的输入框 -->
    <div class="<%= containerClass %> <%= inputMinWidth %> <%= extraClass %>">
        <% if (hasPrefix) { %>
            <span class="<%= prefixClass %>"><%= inputPrefix %></span>
        <% } %>

        <input id="<%= inputId %>"
               type="<%= inputType %>"
               name="<%= inputName %>"
               <% if (isRequired) { %>required<% } %>
               <% if (isDisabled) { %>disabled<% } %>
               <% if (isReadonly) { %>readonly<% } %>
               <% if (inputValue) { %>value="<%= inputValue %>"<% } %>
               class="<%= inputClass %> <%= disabledClass %> <%= readonlyClass %>"
               placeholder="<%= inputPlaceholder %>"/>

        <% if (hasSuffix) { %>
            <span class="<%= suffixClass %>"><%= inputSuffix %></span>
        <% } %>
    </div>
<% } else { %>
    <!-- 普通输入框 -->
    <input id="<%= inputId %>"
           type="<%= inputType %>"
           name="<%= inputName %>"
           <% if (isRequired) { %>required<% } %>
           <% if (isDisabled) { %>disabled<% } %>
           <% if (isReadonly) { %>readonly<% } %>
           <% if (inputValue) { %>value="<%= inputValue %>"<% } %>
           class="<%= inputClass %> <%= disabledClass %> <%= readonlyClass %> <%= extraClass %>"
           placeholder="<%= inputPlaceholder %>"/>
<% } %>